<template>
	<view class="modal_wrap">
		<view class="top_nav">
			<view class="top_nav_item" @click="toHome('oldHome')">上拣空</view>
			<view class="top_nav_item" @click="toHome('newHome')">呼翻退</view>
		</view>

		<view class="click-box1" @click="handleModal('椅背板')"></view>
		<view class="click-box2" @click="handleModal('骨架')"></view>
		<view class="click-box3" @click="handleModal('中排扶手')"></view>

		<!-- 主弹窗 -->
		<view class="cu-modal" :class="modalVisibles ? 'show' : ''">
			<view class="cu-dialog" style="width: 80vw">
				<view class="cu-bar bg-white justify-end" style="height: 8vh">
					<view class="content" style="font-size: 3vh">{{ header }}</view>
					<view class="fanmian_btn" @click="showFanmianModal">货架翻面</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red" style="font-size: 4vh"></text>
					</view>
				</view>
				<view class="btn-wrap2">
					<view class="sm_title text-left">方法：</view>
					<view class="box-btn2" v-for="(el, i) in typeList" :key="i" :class="el.value === typeCode ? 'bg-blue' : 'bg-grey'" @click="checkType(el)">
						{{ el.text }}
					</view>
				</view>
				<view class="btn-wrap2">
					<view class="sm_title text-left" style="width: 100%">站点：</view>
					<view class="box-btn2" v-for="(el, i) in pointList" :class="el === pointCode ? 'bg-blue' : 'bg-grey'" :key="i" @click="checkPoint(el)">
						{{ el }}
					</view>
				</view>
				<view class="btn-wrap2" style="height: 35vh" v-if="display">
					<view class="sm_title text-left" style="width: 100%">物料号：</view>
					<view class="box-btn2" v-for="(el, i) in matList" :key="i" :class="el.value === matCode ? 'bg-blue' : 'bg-grey'" @click="checkMat(el)">
						{{ el.text }}
					</view>
				</view>

				<view class="cu-bar bg-white justify-end" style="height: 10vh; font-size: 3vh">
					<view class="action">
						<view class="send_btn" @click="sendTask1">发送任务</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 货架翻面弹窗 -->
		<view class="cu-modal" :class="fanmianModalVisible ? 'show' : ''">
			<view class="cu-dialog" style="width: 70vw">
				<view class="cu-bar bg-white justify-end" style="height: 8vh">
					<view class="content" style="font-size: 3vh">货架翻面</view>
					<view class="action" @tap="hideFanmianModal">
						<text class="cuIcon-close text-red" style="font-size: 4vh"></text>
					</view>
				</view>
				<view class="btn-wrap2" style="min-height: 20vh; padding: 3vh 2vw;">
					<view class="sm_title text-left" style="width: 100%; margin-bottom: 2vh;">请选择点位：</view>
					<view class="box-btn2 fanmian-point-btn" 
						v-for="(point, index) in fanmianPoints" 
						:key="index" 
						:class="selectedFanmianPoint === point ? 'bg-blue' : 'bg-grey'" 
						@click="selectFanmianPoint(point)">
						{{ point }}
					</view>
				</view>
				<view class="cu-bar bg-white justify-end" style="height: 10vh; font-size: 3vh">
					<view class="action">
						<view class="send_btn" @click="sendFanmianTask">发送翻面任务</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			URL: '',
			modalVisibles: false,
			fanmianModalVisible: false, // 货架翻面弹窗显示状态
			positionList: [],
			matList: [],
			typeList: [
				{
					text: '空满交换(自动补料,退空)',
					value: '0',
					url: '/RearArmrestTask/EmptyFullExchange'
				},
				{
					text: '空满交换(自动补料,退零)',
					value: '1',
					url: '/RearArmrestTask/EmptyFullExchange'
				},
				{
					text: '只补满',
					value: '3',
					url: '/RearArmrestTask/OnlyFullUp'
				},
				{
					text: '退空',
					value: '4',
					url: '/RearArmrestTask/SendEmptyBoxToEmptyRecoveryArea'
				}
			],
			pointList: [],
			matCode: '',
			typeCode: '',
			pointCode: '',
			header: '',
			// 货架翻面相关数据
			fanmianPoints: [],
			selectedFanmianPoint: '' // 选中的翻面点位
		};
	},
	onLoad() {},
	mounted() {},

	computed: {
		display() {
			return this.typeCode != '4';
		}
	},
	methods: {
		toHome(url) {
			uni.navigateTo({
				url: '/pages/index/' + url
			});
		},
		checkType(el) {
			if (this.typeCode === el.value) {
				this.typeCode = '';
				return;
			}
			this.URL = el.url;
			this.typeCode = el.value;
		},
		checkMat(el) {
			if (this.matCode === el.value) {
				this.matCode = '';
				return;
			}
			this.matCode = el.value;
		},
		checkPoint(el) {
			if (this.pointCode === el) {
				this.pointCode = '';
				return;
			}
			this.pointCode = el;
		},

		initData(key) {
			const that = this;
			this.$api.postAPI('/task/getlistdatabytype?type=' + key, {}).then(
				(res) => {
					that.pointList = res.data;
					this.modalVisibles = true;
				},
				(req) => {
					that.pointList = ['111', '222', '333', '444'];
					this.modalVisibles = true;
				}
			);
		},
		hideModal() {
			this.modalVisibles = false;
		},
		goUpGoods(key) {
			uni.navigateTo({
				url: '/pages/upgoods/index?key=' + key + '&title=上料区'
			});
		},
		handleModal(key) {
			let str = '';
			if (key === '椅背板') {
				this.matList = [
					{
						text: '1809420-00-F[椅背板（NFPP+PVC包覆）]',
						value: '1809420-00-F'
					},
					{
						text: '2068413-00-C[椅背板（NFPP+Cosmos织物包覆）]',
						value: '2068413-00-C'
					},
					{
						text: '2081222-91-F[T0402-Lux 二排椅背板-黑色]',
						value: '2081222-91-F'
					},
					{
						text: '2068413-03-D[T0402-LUX 前排椅背板(灰色)]',
						value: '2068413-03-D'
					},
					{
						text: '2068413-01-D[T0.402-LUX椅背板-前排黑色]',
						value: '2068413-01-D'
					},
					{
						text: '2081222-03-F[椅背板(NFPP+PVC包要)]',
						value: '2081222-03-F'
					},
					{
						text: '2232004-00-A[T0402-Base 前排椅背板]',
						value: '2232004-00-A'
					},
					{
						text: '232004-00-B[Base椅背板]',
						value: '2232004-00-B'
					}
				];
				str = '7';
			}
			if (key === '骨架') {
				this.matList = [
					{
						text: '1527029-00-B[TESLA M3前排靠背骨架]',
						value: '1527029-00-B'
					},
					{
						text: '1527041-00-E[TESLA M3Y前排座垫骨架]',
						value: '1527041-00-E'
					},
					{
						text: '1727805-01-C',
						value: '1727805-01-C'
					},
					{
						text: '1727805-02-C',
						value: '1727805-02-C'
					}
				];
				str = '8';
			}
			if (key === '中排扶手') {
				this.matList = [
					{
						text: '2070410-01-D[Lux-扶手黑色]',
						value: '2070410-01-D'
					},
					{
						text: '2070410-03-D[Lux-扶手灰色]',
						value: '2070410-03-D'
					},
					{
						text: '2070411-03-D[Lux-扶手灰色]',
						value: '2070411-03-D'
					},
					{
						text: '2070411-01-D[Lux-扶手黑色]',
						value: '2070411-01-D'
					}
				];
				str = '9';
			}
			this.initData(str);
			this.header = key;
		},
		
		// 显示货架翻面弹窗
		showFanmianModal() {
			const that = this;
			this.$api.getAPI('/api/sendtask/getfilplocation', '').then(
				(res) => {
					that.fanmianPoints =  res
					that.fanmianModalVisible = true;
					that.selectedFanmianPoint = ''; // 重置选择
				},
				(req) => {
		
				}
			);

		},
		
		// 隐藏货架翻面弹窗
		hideFanmianModal() {
			this.fanmianModalVisible = false;
		},
		
		// 选择翻面点位
		selectFanmianPoint(pointValue) {
			if (this.selectedFanmianPoint === pointValue) {
				this.selectedFanmianPoint = ''; // 取消选择
			} else {
				this.selectedFanmianPoint = pointValue;
			}
		},
		
		// 发送货架翻面任务
		sendFanmianTask() {
			if (!this.selectedFanmianPoint) {
				uni.showModal({
					title: '提示',
					content: '请先选择点位！'
				});
				return;
			}
			
			uni.showModal({
				title: '提示',
				content: `确认发送货架翻面任务到${this.selectedFanmianPoint}?`,
				success: (res) => {
					if (res.cancel) return;
					
					uni.showLoading({
						title: '提交中!',
						mask: true
					});
					// 这里替换为实际的货架翻面API地址
					this.$api.getAPI('/api/sendtask/executefilptask?StartLoc=', this.selectedFanmianPoint).then((res) => {
						uni.hideLoading();
						if (res.success) {
							uni.showToast({
								title: '货架翻面任务发送成功'
							});
							this.hideFanmianModal();
						} else {
							uni.showModal({
								title: '提示',
								content: '任务发送失败:' + (res.message || '未知错误')
							});
						}
					}).catch((error) => {
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: '任务发送失败:' + (error.message || '网络错误')
						});
					});
				}
			});
		},
		
		// 获取点位标签
		getPointLabel(pointValue) {
			const point = this.fanmianPoints.find(item => item.value === pointValue);
			return point ? point.label : '';
		},
		
		sendTask1() {
			let that = this;

			if (!this.typeCode) {
				uni.showModal({
					title: '提示',
					content: '请先选择方法！'
				});
				return;
			}
			if (!this.pointCode) {
				uni.showModal({
					title: '提示',
					content: '请先选择站点！'
				});
				return;
			}
			if (!this.matCode && this.display) {
				uni.showModal({
					title: '提示',
					content: '请先选择物料！'
				});
				return;
			}

			uni.showModal({
				title: '提示',
				content: '确认是否发送任务?',
				success: (res) => {
					if (res.cancel) return;
					uni.showLoading({
						title: '提交中!',
						mask: true
					});
					let params = {};
					if (that.typeCode == '1') {
						params = {
							StartLoc: that.pointCode,
							PartCode: that.matCode,
							IsRemainder: '1',
							IsCreateFeedingTask: '1'
						};
					}
					if (that.typeCode == '0') {
						params = {
							StartLoc: that.pointCode,
							PartCode: that.matCode,
							IsRemainder: '0',
							IsCreateFeedingTask: '1'
						};
					}
					if (that.typeCode == '3') {
						params = {
							EndLoc: that.pointCode,
							PartCode: that.matCode
						};
					}
					if (that.typeCode == '4') {
						params = {
							StartLoc: that.pointCode
						};
					}
					let paramsUrl = that.URL + '?';
					for (let key in params) {
						paramsUrl = paramsUrl + key + '=' + params[key] + '&';
					}
					paramsUrl = paramsUrl.slice(0, -1);
					that.$api.getAPI(paramsUrl, '').then((res) => {
						uni.hideLoading();
						if (!res.success) {
							uni.showModal({
								title: '提示',
								content: '任务发送失败:' + res.data
							});
						} else {
							uni.showToast({
								title: '任务发送成功'
							});
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped>
.modal_wrap {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
	background-image: url(../../static/three_bg.jpg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
}

.click-box1 {
	position: absolute;
	right: 44.11vw;
	top: 20.19vh;
	width: 19.74vw;
	height: 59.44vh;
}

.click-box2 {
	position: absolute;
	position: absolute;
	right: 23.13vw;
	top: 20.19vh;
	width: 19.74vw;
	height: 59.44vh;
}

.click-box3 {
	position: absolute;
	right: 1.93vw;
	top: 20.19vh;
	width: 19.74vw;
	height: 59.44vh;
	/* background-color: red; opacity: 0.5; */
}

.btn-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.btn-wrap2 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 16vh;
	overflow-y: auto;
	padding: 2vh 2vw;
}

.box-btn {
	width: 17vw;
	height: 9.16vh;
	border-radius: 1vh;
	font-size: 3.98vh;
	color: #fff;
	background-color: #004ea1;
	font-weight: bolder;
	line-height: 9.16vh;
}

.click-box3 {
	position: absolute;
	right: 1.93vw;
	top: 20.19vh;
	width: 19.74vw;
	height: 59.44vh /* background-color: red; opacity: 0.5; */;
}

.send_btn {
	width: 17vw;
	height: 6.16vh;
	margin-left: 8.22vw;
	border-radius: 1vh;
	font-size: 2.98vh;
	color: #004ea1;
	background-color: #bcd500;
	font-weight: bolder;
	line-height: 6.16vh;
}

.box-btn2 {
	/* width: 12vw; */
	padding: 0 2vw;
	height: 6.16vh;
	border-radius: 1vh;
	font-size: 2.28vh;
	color: #fff;
	/* background-color: #004ea1; */
	font-weight: bolder;
	line-height: 6.16vh;
	margin-left: 1vw;
	margin-top: 0.4vw;
}

.sm_title {
	font-size: 2.98vh;
	font-weight: bolder;
}
.fanmian_btn {
	width: 12vw;
	height: 5.16vh;
	margin-left: 8.22vw;
	border-radius: 1vh;
	font-size: 2.58vh;
	color: #fff;
	background-color: grey;
	font-weight: bolder;
	line-height: 5.16vh;
}

/* 货架翻面点位按钮样式 */
.fanmian-point-btn {
	width: 25vw;
	text-align: center;
	margin: 1vh 2vw;
}
</style>